<template>
  <div class="all">
    <!-- 顶部 -->
    <nav-bar>
      <template #title>
        <div class="user-mini">
          <div class="user-wrapper-mini">
            <img
              :src="particulars.aut_photo"
              class="user-img-mini"
            >
          </div>
          <van-cell
            class="user-info-mini"
            :title="particulars.aut_name"
          >
            <span>关注</span>
          </van-cell>
        </div>
      </template>
    </nav-bar>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 标题区域块 -->
      <div class="content-title">
        <!-- 文字标题 -->
        <h3 class="text-title">{{ particulars.title }}</h3>
        <!-- 时间 阅读 评论-->
        <div class="time-read-comments">
          <span>{{ time(particulars.pubdate) }}</span>
          <span class="read">{{ particulars.read_count }}阅读</span>
          <span>{{ particulars.comm_count }}评论</span>
        </div>
        <!-- 个人信息栏 -->
        <van-cell-group
          :border="false"
          class="personal-information"
        >
          <!-- 个人头像 -->
          <div class="user-wrapper">
            <img
              :src="particulars.aut_photo"
              class="user-img"
            >
          </div>
          <!-- 个人信息 -->
          <!-- <van-sticky> -->
          <van-cell
            class="user-info"
            :title="particulars.aut_name"
          >
            <!-- 关注 -->
            <template #right-icon>
              <van-button
                round
                type="info"
                color="#fc6627"
                size="small"
                class="founs-button"
              >
                + 关注
              </van-button>
            </template>
          </van-cell>
          <!-- </van-sticky> -->
        </van-cell-group>
      </div>
      <!-- 正文 -->
      <div v-html="particulars.content" />
    </div>
    <!-- 评论区 -->
    <van-goods-action>
      <van-field
        v-model="value"
        placeholder="抢沙发..."
        class="comments-section"
        left-icon="edit"
      />
      <van-goods-action-icon
        icon="chat-o"
        text="评论"
      />
      <van-goods-action-icon
        icon="good-job-o"
        text="点赞"
      />
      <van-goods-action-icon
        icon="like-o"
        text="收藏"
      />
      <van-goods-action-icon
        icon="share-o"
        text="分享"
        @click="onShowShare"
      />
    </van-goods-action>
    <!-- 三个点 -->
    <van-icon
      name="ellipsis"
      class="ellipsis"
      @click="onShowShare"
    />
    <!-- 分享页 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
  </div>
</template>

<script>
import moment from 'moment'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'ArticleContent',
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      value: '',
    };
  },
  computed: {
    ...mapState('article', [
      'particulars'
    ])
  },
  methods: {
    onShowShare() {
      this.showShare = true;
    },
    ...mapActions('article', [
      'updateParticulars'
    ]),
    time(date) {
      return moment(date).format('YYYY年MM月DD日');
    }
  },
  created() {
    console.log(this.particulars);
    this.updateParticulars(this.$route.params.id);
  },

}
</script>

<style src="highlight.js/styles/gradient-dark.css"></style>
<style lang="less" scoped>
.all {
  width: 100vw;
  height: 100vh;
  .user-mini {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    .user-wrapper-mini {
      width: 28px;
      height: 18px;
      margin: 0 12px;

      .user-img-mini {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .user-info-mini {
      padding: 0;
    }

    span {
      display: block;
      flex: 1;
    }

  }

  // 三个点
  .ellipsis {
    z-index: 99;
    position: absolute;
    top: 16px;
    right: 20px;
  }

  // 评论区
  .comments-section {
    height: 40px;
    margin: 8px;
    line-height: 40px;
    background-color: #f7f8fa;
    border-radius: 999999px;
    padding-left: 12px;
  }

  // 内容区
  .content {
    width: 100%;
    height: calc(100% - 96px);
    overflow: auto;
    padding: 8px 16px;
    box-sizing: border-box;

    // 标题区域块
    .content-title {

      // 文字标题
      .text-title {
        font-weight: 400;
      }

      // 时间阅读评论
      .time-read-comments{
        color: #a5a6ab;
        font-size: 12px;
        .read {
          padding: 0 8px;
          border-right: 1px solid #a5a6ab;
          border-left: 1px solid #a5a6ab;
          margin: 0 8px;
        }
      }
      // 个人信息
      .personal-information {
        display: flex;
        border-bottom:1px solid #f8f9fa ;
        padding-bottom: 8px;
        align-items: center;
        margin-top: 12px;
        // 个人头像
        .user-wrapper {
          width: 37px;
          height: 35px;
          margin-right: 12px;
          .user-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        // 关注按钮
        .user-info {
          padding: 8px 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .founs-button {
          width: 70px;
        }
      }
    }
  }

}
</style>
